
<template>
  <view>
    <view class="flex electronic-coupons align-center" v-if="couponInfo.type == '1'">
      <view class="padding-lr padding-tb-sm justify-between" style="width: 476rpx;">
        <view class="flex">
          <view class="flex-sub flex ">
            <text class="text-sl text-bold overflow-1 number ">{{couponInfo.reduceAmount}}</text>
            <text class="text-sm margin-top-lg margin-left-xs">元</text>
          </view>
          <view class="margin-top-sm">
            <view class="text-xs overflow-1">订单满{{couponInfo.premiseAmount}}元可使用</view>
            <view class="text-xs">{{couponInfo.suitType == '1' ? '全部商品可用' : couponInfo.suitType == '2' ? '指定商品可用' : couponInfo.suitType == '3' ? '指定商品不可用' : ''}}</view>
          </view>
        </view>
        <view  v-if="theme.showType!=2" class="flex margin-top-sm align-center justify-center" >
          <image :src="couponInfo.shopInfo.imgUrl" class="round head-image"></image>
          <view class="overflow text-sm text-center">{{couponInfo.shopInfo.name}}</view>
        </view>
        <view  v-else class="flex margin-top-sm align-center justify-center">
          <view class="head-image" ></view>
        </view>
      </view>
      <view class="flex-sub padding-sm text-center">
        <!-- <view class="ticket margin-top-sm">代金券</view> -->
        <view class="margin-top-sm round btn-get text-sm" :class="'bg-'+theme.backgroundColor" v-if="!couponInfo.couponUser" @tap="couponUserSave">立即领取</view>
        <view v-if="couponInfo.couponUser">
          <view class="padding-xs" v-if="!toUse">已领取</view>
          <navigator hover-class="none" :url="'/pages/goods/goods-list/index?couponUserId=' + couponInfo.couponUser.id"
                     class="text-xs margin-top-sm" v-if="toUse">已领取,去使用</navigator>
        </view>
        <view class="validity margin-top-sm text-center">
          <view class="text-xs" v-if="couponInfo.expireType == '1'">领取后{{couponInfo.validDays}}天有效</view>
          <view class="text-xs" v-if="couponInfo.expireType == '2'">{{couponInfo.validBeginTime}}至{{couponInfo.validEndTime}}</view>
        </view>
      </view>
    </view>
    <view class="flex electronic-coupons-2 align-center" v-if="couponInfo.type == '2'">
      <view class="padding-lr padding-tb-sm justify-between" style="width: 476rpx;">
        <view class="flex">
          <view class="flex-sub flex ">
            <text class="text-sl text-bold overflow-1 number">{{couponInfo.discount}}</text>
            <text class="text-sm margin-top-lg margin-left-xs">折</text>
          </view>
          <view class="margin-top-sm">
            <view class="text-xs overflow-1">订单满{{couponInfo.premiseAmount}}元可使用</view>
            <view class="text-xs">{{couponInfo.suitType == '1' ? '全部商品可用' : couponInfo.suitType == '2' ? '指定商品可用' : couponInfo.suitType == '3' ? '指定商品不可用' : ''}}</view>
          </view>
        </view>
        <view  v-if="theme.showType!=2" class="flex margin-top-sm align-center justify-center">
          <image :src="couponInfo.shopInfo.imgUrl" class="round head-image"></image>
          <view class="overflow text-sm text-center">{{couponInfo.shopInfo.name}}</view>
        </view>
        <view  v-else class="flex margin-top-sm align-center justify-center">
          <view class="head-image" ></view>
        </view>
      </view>
      <view class="flex-sub padding-sm text-center">
        <!-- <view class="ticket margin-top-sm">折扣券</view> -->
        <view class="margin-top-sm round btn-get text-sm" :class="'bg-'+theme.backgroundColor" v-if="!couponInfo.couponUser" @tap="couponUserSave">立即领取</view>
        <view v-if="couponInfo.couponUser">
          <view class="padding-xs text-bold" v-if="!toUse">已领取</view>
          <navigator hover-class="none" :url="'/pages/goods/goods-list/index?couponUserId=' + couponInfo.couponUser.id"
                     class="text-xs margin-top-sm" v-if="toUse">已领取，去使用</navigator>
        </view>
        <view class="validity margin-top-sm text-center">
          <view class="text-xs" v-if="couponInfo.expireType == '1'">领取后{{couponInfo.validDays}}天有效</view>
          <view class="text-xs" v-if="couponInfo.expireType == '2'">{{couponInfo.validBeginTime}}至{{couponInfo.validEndTime}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

const app = getApp();
import api from 'utils/api'

export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      theme: app.globalData.theme, //全局颜色变量
    };
  },

  components: {},
  props: {
    couponInfo: {
      type: Object,
      default: () => ({})
    },
    toUse: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    couponUserSave() {
      api.couponUserSave({
        couponId: this.couponInfo.id
      }).then(res => {
        uni.showToast({
          title: '领取成功',
          icon: 'success',
          duration: 2000
        });
        this.couponInfo.couponUser = res.data;
        this.$emit('receiveCoupon', this.couponInfo);
      });
    }

  }
};
</script>
<style>
/* 03 */
.electronic-coupons {
  background-image: url('');
  background-size: 100% 178rpx;
  background-repeat: no-repeat;
  color: #f92713;
}

.electronic-coupons-2 {
  background-image: url('');
  background-size: 100% 178rpx;
  background-repeat: no-repeat;
  color: #f92713;
}

.head-image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.number{
  font-size: 68rpx;
}

.btn-get{
  padding: 8rpx 3rpx;
  width: 80%;
  margin: auto;
}
</style>
